<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>2-1</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<style type="text/css">
    #table {
        border: 2px solid #CCCCCC;
        border-radius: 5px;
    }

    thead {
        background: #B847FF;
    }

    th,td {
        border: 1px solid #CCCCCC;
        width: 150px;
    }

    td:hover {
        background: #4AB348;
    }
</style>
<!-- Sizzle -->
<script type="text/javascript">
    $(function() {
        $('#table tbody tr:even').css('background','#AAAAAA');
    });
</script>
</head>
<body>
    <table id="table" cellspacing="0" cellpadding="10">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>11</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>12</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>13</td>
            </tr>
            <tr>
                <td>张六</td>
                <td>14</td>
            </tr>
            <tr>
                <td>陈七</td>
                <td>15</td>
            </tr>
            <tr>
                <td>周八</td>
                <td>16</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
